
#{if _organizacion!=null}
	<h2 id="crudShowTitle">Agregar Contacto 
	<img id="addContacto" src="/public/images/Add.png" alt="Add">
	</h2>
	<div class="contactos">
		<table>		
			<thead>
				<tr>
					<th>Nombre</th>
					<th>Cargo</th>
					<th>Area</th>
					<th>Email</th>
					<th>Telefono</th>
					<th></th>
				</tr>
			</thead>
			#{list items:_contactosEmpresa, as:'contactoEmpresa'}				
				<tr>
					<td>${contactoEmpresa.contacto}</td>
					<td><input id="cargo_${contactoEmpresa.id}" type="text" value=${contactoEmpresa.cargo}></td>
					<td><input id="area_${contactoEmpresa.id}" type="text" value=${contactoEmpresa.area}></td>
					<td><input id="email_${contactoEmpresa.id}" type="text" value=${contactoEmpresa.contacto.mail}></td>
					<td><input id="telefono_${contactoEmpresa.id}" type="text" value=${contactoEmpresa.contacto.telefono}></td>
					<td>
						<a onclick="updateContactoOrganizacion(${contactoEmpresa.id});" style="cursor: pointer; cursor: hand;" class="contacto" ><img height="16px" width="16px" id="updateContactoEmpresa" src="/public/images/save.png" alt="save"></a>
	 					<a href="@{ContactoEmpresas.removeContactoEmpresa(contactoEmpresa.id)}" class="contacto" ><img height="16px" width="16px" id="removeContacto" src="/public/images/delete.gif" alt="remove"></a>
						<a href="@{ContactoEmpresas.historiaCargos(contactoEmpresa.id)}" class="contacto" ><img height="16px" width="16px" id="historialEmpresa" src="/public/images/info.png" alt="info"></a>
					</td>
				</tr>
			#{/list}
		</table>	
	</div>
	
	<div id="dialog-contactos"  style="display: none" class="dialog-style">
		<h2 id="crudShowTitle">&{'crud.blank.title', 'Contactos'}
		<input type="text" id="contactoNameSearch" name="contactoNameSearch">
		<img id="nuevoContacto" src="/public/images/Add.png" alt="Add">
		</h2>
		<div class="objectForm">
			<div class="crudField crud_text" id="organizacionesDiv">
				<table id="organizacionesTable">			
					#{list items:_contactos, as:'contacto'}				
						<tr><td><a href="@{ContactoEmpresas.asociarContacto(_organizacion, contacto.id)}" class="contacto" >${contacto}</a></td></tr>
					#{/list}
				</table>
			</div>
		</div>	
	</div> 
	
	<div id="dialog-nuevo-contacto"  style="display: none" class="dialog-style" >
		<h2 id="crudShowTitle">&{'crud.blank.title', 'Contactos'}
		</h2>
		<div id="nuevoContactoError"></div>
		<div class="objectForm">
			<div class="crudField crud_text">
				<label for = "tratamientoNuevoContacto">Tratamiento</label><input type="text" id="tratamientoNuevoContacto" name="tratamientoNuevoContacto" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "nombreNuevoContacto">Nombre</label><input type="text" id="nombreNuevoContacto" name="nombreNuevoContacto" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "apellidoNuevoContacto">Apellido</label><input type="text" id="apellidoNuevoContacto" name="apellidoNuevoContacto" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "marcaComercialNuevoContacto">Marca Comercial</label><input type="text" id="marcaComercialNuevoContacto" name="marcaComercialNuevoContacto" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "emailNuevoContacto">Email</label><input type="text" id="emailNuevoContacto" name="emailNuevoContacto" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "telefonoNuevoContacto">Telefono</label><input type="text" id="telefonoNuevoContacto" name="telefonoNuevoContacto" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "cargoNuevoContacto">Cargo</label><input type="text" id="cargoNuevoContacto" name="cargoNuevoContacto" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "areaNuevoContacto">Area</label><input type="text" id="areaNuevoContacto" name="areaNuevoContacto" value="">
			</div>
			<input type="button" value="Save" onclick="saveNuevoContacto();">
		</div>		
	</div> 


<script type="text/javascript">
$().ready(function() {
	
	$( "#dialog-contactos").dialog({
		autoOpen: false,
	    width: 550, 
	    maxWidth: 550,
	    minWidth: 430,
		height: 'auto',
		fluid: true, 
	    resizable: false,
	    dialogClass: "dialog-style",
	    open: function(event, ui){
	    },
	    close: function(event, ui){
	    	$( "#dialog-contactos" ).dialog( "close" );
	    }
	});
	$( "#dialog-nuevo-contacto").dialog({
		autoOpen: false,
	    width: 550, 
	    maxWidth: 550,
	    minWidth: 430,
		height: 'auto',
		fluid: true, 
	    resizable: false,
	    dialogClass: "dialog-style",
	    open: function(event, ui){
	    },
	    close: function(event, ui){
	    	$( "#dialog-nuevo-contacto" ).dialog( "close" );
	    }
	});
	$("#contactoNameSearch").keyup(function() {
		  searchContactos();
	});
	$( "#addContacto" ).click(function() {
		$( "#dialog-contactos" ).dialog( "open" );
		return false;
	});
	$( "#nuevoContacto" ).click(function() {
		$( "#dialog-nuevo-contacto" ).dialog( "open" );
		return false;
	});
	
	
})

function searchContactos(){
	$.get("/Organizaciones/search",  {		
		organizacionId: ${_organizacion},
		nombre: $("#contactoNameSearch").val()
	},function(data, id){
		if(data[0] != 'ERROR'){
			$("#organizacionesTable").remove();
			var contactos = JSON.parse(data[1]);
			var i = 0;
			html = "<table id='organizacionesTable'>";
			for(i = 0; i < contactos.length; i++) {
				html = html + 
				"<tr><td><a href='/ContactoEmpresas/asociarContacto?organizacionId=${_organizacion}&contactoId="+contactos[i].id+"' class='contacto' >"+
						contactos[i].razonSocial + ' ' + contactos[i].nombre + ' ' + contactos[i].apellido+ ' ' + contactos[i].marcaComercial +
						"</a></td></tr>";
			}
			html = html + "</table>";
			$("#organizacionesDiv").append(html);
			return false;
		}else {
			return false;
		}
		
	},'json');
}

function updateContactoOrganizacion(contactoEmpresaId){
	cargo = $('#cargo_'+contactoEmpresaId).val();
	area = $('#area_'+contactoEmpresaId).val();
	telefono = $('#telefono_'+contactoEmpresaId).val();
	email = $('#email_'+contactoEmpresaId).val();
	$.get("/ContactoEmpresas/updateContactoOrganizacion",  {
		contactoEmpresaId: contactoEmpresaId,
		cargo: cargo, area: area, telefono: telefono, email:email
	},function(data){
		if(data[0] != 'ERROR'){
			alert("Contacto actualizado correctamente");
			return false;
		}else {
			return false;
		}
		
	},'json');
}

function saveNuevoContacto(){
	tratamiento = $("#tratamientoNuevoContacto").val();
	nombre = $("#nombreNuevoContacto").val();
	apellido = $("#apellidoNuevoContacto").val();
	marcaComercial = $("#marcaComercialNuevoContacto").val();
	cargo = $("#cargoNuevoContacto").val();
	area = $("#areaNuevoContacto").val();
	email = $("#emailNuevoContacto").val();
	telefono = $("#telefonoNuevoContacto").val();
	if (nombre==null || nombre=='')
		$("#nuevoContactoError").append("error");
	else {
		$.get("/Organizaciones/newContacto",  {
			id: '${_organizacion}',
			tratamiento: tratamiento,
			nombre: nombre,		
			apellido: apellido,
			marcaComercial: marcaComercial,	
			cargo: cargo,
			area: area,
			telefono: telefono, 
			email:email
		},function(data){
			if(data[0] != 'ERROR'){
				window.location.assign("/admin/organizaciones/${_organizacion}");
				return false;
			}else {
				alert(data[1]);
				return false;
			}
			
		},'json');
	}
}
</script>
#{/if}